<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <!-- 1.创建网页
         2.创建表单
    -->
    <h1 align="center">用户列表</h1>
    <table border="1" width="600" cellspacing="0" cellpadding="10" align="center">
          <thead>
             <tr>
                 <th>编号</th>
                 <th>姓名</th>
                 <th>邮箱</th>
                 <th>真实姓名</th>
                 <th>操作</th>
            </tr>
          </thead>
          <tbody id="data" align="center">
          </tbody>
    </table>
        <script>
            function show(){
                // 创建对象
                var xhr = new XMLHttpRequest();
                // 指定接收数据的函数
                xhr.onreadystatechange = function(){
                    if(xhr.readyState===4&&xhr.status===200){
                        //alert(xhr.responseText);
                        //5.1将服务器转化为JS对象
                        var obj = JSON.parse(xhr.responseText);
                        //alert(obj);
                        //5.2创建变量，用来保存空字符串
                        var html = "";
                        //5.3创建循环遍历JS对象中数组内容
                        for(var i=0;i<obj.length;i++){
                      //5.4:按照对象拼接表格一行
                      html += `<tr>
                        <td>${obj[i].id}</td>
                        <td>${obj[i].uname}</td>
                        <td>${obj[i].email}</td>
                        <td>${obj[i].user_name}</td>
                        <td><a href="javascript:;" onclick="delete2(${obj[i].id})">删除</a> &nbsp;&nbsp;&nbsp;
                            <a href="update.html?email=${obj[i].email}&id=${obj[i].id}" target="black">修改</a></td></tr>`;
                     }
                        //5.4按照对象拼接表格一行
                        //5.5循环外将字符串赋值ID="data"
                        var data = document.getElementById("data");
                        data.innerHTML = html;
                    }
                }  
                // 指定服务器地址
                var url = "http://127.0.0.1:3000/user/list";
                xhr.open("GET",url,true);
                // 发送
                xhr.send();
            }
            show();
            function delete2(id){
                //1、获取当前删除用户的id
                //alert(id);
                //2、显示确认框
                var rs = confirm("是否删除指定数据？");
                //alert(rs);
                //3、如果用户点击取消停止函数
                if(!rs){
                    return;
                }
                //4、ajax 五步操作
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState===4 && xhr.status==200){
                        var rs = xhr.responseText;
                        var obj = JSON.parse(rs);
                        if(obj.code==1){
                            alert("删除成功");
                            show();
                        }
                    }
                }
                var url = `http://127.0.0.1:3000/user/delUser/${id}`;
                xhr.open("delete",url,true);
                xhr.send();
            }
        </script>
</body>
</html>